<template>
    <div class="siteMap">
        <div class="site-table">
            <div>
                <v-table
                        is-horizontal-resize
                        style="width:610px"
                        :columns="allColumns"
                        :table-data="allTableData"
                        even-bg-color="#f4f4f4"
                        row-hover-color="#eee"
                        row-click-color="#edf7ff">
                </v-table>
            </div>
            <div class="name-box">
                <v-table
                        is-vertical-resize
                        is-horizontal-resize
                        :min-height='300'
                        style="width:610px;margin-top: 10px"
                        :vertical-resize-offset='60'
                        even-bg-color="#f4f4f4"
                        :columns="deivceColumns"
                        :table-data="deviceTableData">
                </v-table>
            </div>
        </div>
        <div class="echarts">
            <echart :options="showMap" @click="onClick" auto-resize/>
        </div>
    </div>
</template>

<script>
    import ECharts from 'vue-echarts/components/ECharts.vue'
    import 'echarts/lib/chart/map'
    import 'echarts/map/js/world'
    // Map of China
    import chinaMap from '../../china.json'
    // registering map data
    ECharts.registerMap('china', chinaMap)


    export default {
        name: "SiteMap",
        methods: {
            getData() {
                this.$axiosPost("/allSiteDevice.action").then((res) => {
                    this.findData = res.data;
                    // console.log(this.findData)
                })
            },
            onClick(event, instance, echarts) {
                let arg = arguments[0]
                if (arg.seriesIndex != 2) {
                    this.showDeviceMess(arg.data.value[4])
                } else {
                    console.log("seriesIndex 2")
                }
            },
            showDeviceMess(devies) {
                this.deviceTableData.splice(0, this.deviceTableData.length)
                if (devies.length > 0) {
                    this.deviceTableStatus = devies[0].siteName
                    devies.forEach((it) => {
                        this.deviceTableData.push({
                            "siteName": it.siteName,
                            "itemName": it.itemName,
                            "updateTime": it.updateTime,
                            "online": it.online
                        })
                    })
                }
            }
        },
        created: function () {
            this.getData()
            setInterval(() => {
                this.getData()
                console.log(new Date())
            }, 1000 * 60);
        }
        ,
        data() {
            return {
                allTableData: [],
                allColumns: [{
                    field: 'type',
                    title: '类型',
                    width: 150,
                    titleAlign: 'center',
                    columnAlign: 'center',
                    isResize: true
                }, {
                    field: 'online',
                    title: '在线',
                    width: 150,
                    titleAlign: 'center',
                    columnAlign: 'center',
                    isResize: true
                }, {
                    field: 'total',
                    title: '总数',
                    width: 150,
                    titleAlign: 'center',
                    columnAlign: 'center',
                    isResize: true
                }],
                siteName: '',
                deviceTableData: [],
                deviceTableStatus: '',
                deivceColumns: [
                    {
                        field: 'siteName',
                        title: '案场',
                        width: 150,
                        titleAlign: 'center',
                        columnAlign: 'center',
                        isResize: true
                    },
                    {
                        field: 'itemName',
                        title: '设备名',
                        width: 180,
                        titleAlign: 'center',
                        columnAlign: 'center',
                        isResize: true
                    },
                    {
                        field: 'online',
                        title: '状态',
                        width: 50,
                        titleAlign: 'center',
                        columnAlign: 'center',
                        isResize: true,
                        formatter: function (rowData) {
                            var statusColor = ""
                            var value = ""
                            if (rowData.online < 0) {
                                statusColor = "#f44015"
                                value = "断线"
                            } else {
                                statusColor = "#60cc01"
                                value = "正常"
                            }
                            return '<span style="color:' + statusColor + ';font-weight: bold;">' + value + '</span>'
                        }
                    },
                    {
                        field: 'updateTime',
                        title: '最后更新时间',
                        width: 180,
                        titleAlign: 'center',
                        columnAlign: 'center',
                        isResize: true
                    }
                ],
                showMap: {},
                findData: {}
            }
        }
        ,
        watch: {
            findData: {
                handler(val) {
                    if (val&&val.siteItem) {
                        let siteItems = val.siteItem
                        let normalSite = []
                        let regularSite = []
                        let siteOnline = 0
                        if (siteItems.length > 0) {
                            let devices = siteItems[0].items
                            siteItems.forEach((it) => {
                                let a = {
                                    name: it.siteName,
                                    value: [it.longitude, it.latitude, it.total, it.online, it.items]
                                }
                                if (it.total == it.online) { //正常案场
                                    normalSite.push(a)
                                    siteOnline++
                                } else {
                                    regularSite.push(a)
                                }
                                if (this.deviceTableStatus != '') {
                                    if (this.deviceTableStatus === it.siteName) {
                                        devices = it.items
                                    }
                                }
                            })
                            this.showDeviceMess(devices);
                        }
                            this.allTableData = [
                                {"type": "案场", "total": siteItems.length, "online": siteOnline},
                                {"type": "总设备", "total": val.allDevice, "online": val.deviceOnline},
                                {"type": "总物品", "total": val.allItem, "online": val.itemOnline}
                            ]

                            this.showMap = {
                                // backgroundColor: '#404a59',
                                title: {
                                    // text: '案场分布图',
                                    left: 'center',
                                    textStyle: {
                                        color: '#000'
                                    }
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: function (params) {
                                        return params.name + "<br/>" + params.value[3] + "/" + params.value[2];
                                    }
                                },
                                visualMap: {
                                    min: 0,
                                    max: 1500,
                                    show: false,
                                    // left: 'left',
                                    // top: 'bottom',
                                    // text: ['High','Low'],
                                    seriesIndex: [2], //地图省份变色
                                    inRange: {
                                        color: ['#e0ffff', '#006edd']
                                    },
                                    calculable: false
                                },
                                legend: {
                                    orient: 'vertical',
                                    y: 'top',
                                    x: 'right',
                                    data: ['正常', '异常'],
                                    textStyle: {
                                        color: '#000'
                                    }
                                },
                                toolbox: {
                                    show: true,
                                    orient: 'vertical',
                                    left: 'right',
                                    top: 'center',
                                    feature: {
                                        mark: {show: true},
                                        // dataView : {show: true, readOnly: false},
                                        restore: {show: true},
                                        saveAsImage: {show: true}
                                    }
                                },
                                geo: {
                                    map: 'china',
                                    roam: true,
                                    label: {
                                        emphasis: {
                                            // show: false
                                            show: true,
                                            textStyle: {
                                                color: 'rgba(0,0,0,0.4)'
                                            }
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            borderColor: 'rgba(0, 0, 0, 0.2)',
                                            // areaColor: '#323c48',
                                            // borderColor: '#111'
                                        },
                                        emphasis: {
                                            // areaColor: '#2a333d'
                                            areaColor: 'rgba(0, 0, 0, 0.5)'
                                        },
                                    }
                                },
                                series: [
                                    {
                                        name: '正常',
                                        type: 'scatter',
                                        coordinateSystem: 'geo',
                                        data: normalSite,
                                        symbolSize: 13,
                                        showEffectOn: 'render',
                                        rippleEffect: {
                                            brushType: 'stroke'
                                        },
                                        hoverAnimation: true,
                                        // label: {
                                        //     normal: {
                                        //         formatter: '{b}',
                                        //         position: 'right',
                                        //         show: true
                                        //     }
                                        // },
                                        itemStyle: {
                                            normal: {
                                                color: '#0eff40',
                                                shadowBlur: 10,
                                                shadowColor: '#0eff40'
                                            }
                                        },
                                        zlevel: 1
                                    },
                                    {
                                        name: '异常',
                                        type: 'effectScatter',
                                        coordinateSystem: 'geo',
                                        data: regularSite,
                                        symbolSize: 13,
                                        showEffectOn: 'render',
                                        rippleEffect: {
                                            brushType: 'stroke'
                                        },
                                        hoverAnimation: true,
                                        // label: {
                                        //     normal: {
                                        //         formatter: '{b}',
                                        //         position: 'right',
                                        //         show: true
                                        //     }
                                        // },
                                        itemStyle: {
                                            normal: {
                                                color: '#f00a07',
                                                shadowBlur: 10,
                                                shadowColor: '#f00a07'
                                            }
                                        },
                                        zlevel: 1
                                    },
                                    {
                                        name: 'provinceColor',
                                        type: 'map',
                                        geoIndex: 0,
                                        tooltip: {show: false},
                                        data: [
                                            {name: '北京', value: 1000},
                                            {name: '天津', value: 800},
                                            {name: '上海', value: 1000},
                                            {name: '重庆', value: 500},
                                            {name: '河北', value: 400},
                                            {name: '河南', value: 300},
                                            {name: '云南', value: 200},
                                            {name: '辽宁', value: 100},
                                            {name: '黑龙江', value: 700},
                                            {name: '湖南', value: 400},
                                            {name: '安徽', value: 300},
                                            {name: '山东', value: 800},
                                            {name: '新疆', value: 700},
                                            {name: '江苏', value: 600},
                                            {name: '浙江', value: 800},
                                            {name: '江西', value: 400},
                                            {name: '湖北', value: 300},
                                            {name: '广西', value: 800},
                                            {name: '甘肃', value: 900},
                                            {name: '山西', value: 100},
                                            {name: '内蒙古', value: 700},
                                            {name: '陕西', value: 500},
                                            {name: '吉林', value: 600},
                                            {name: '福建', value: 700},
                                            {name: '贵州', value: 44},
                                            {name: '广东', value: 555},
                                            {name: '青海', value: 868},
                                            {name: '西藏', value: 300},
                                            {name: '四川', value: 555},
                                            {name: '宁夏', value: 757},
                                            {name: '海南', value: 654},
                                            {name: '台湾', value: 222},
                                            {name: '香港', value: 888},
                                            {name: '澳门', value: 666}
                                        ]
                                    }
                                ]
                            }
                        }
                    },
                    deep: true
                }
            }
        }
</script>

<style>
    .siteMap {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .site-table {
        flex: 1;
    }

    .echarts {
        flex: 2;
        width: 95%;
        height: 95%;
    }

    .name-box {
        margin-top: 10px;
    }

    .name {
        color: #515a6e;
        font-weight: bold;
    }
</style>